<template>
	<view class="main">
		<view style="height: 80rpx;"></view>
		<view class="detail">
			<view style="display: flex;align-items: center;padding-top: 32rpx;">
				<text class="detail-title">案件编号：</text>
				<text class="detail-nums">{{itemDetail.no}}</text>
			</view>

			<view style="display: flex;align-items: center;height: 100rpx;">
				<text class="detail-title">案件状态：</text>
				<text class="detail-status">{{statusDesc}}</text>
				<image src="../../../../../static/phone/phone_edit.png" v-if="role!='0' && isEdit"
					style="width: 40rpx;height: 40rpx;margin-left: 16rpx;" @click="editStatus"></image>

				<view class="over" v-if="role!='0' && statusDesc!='已结案' && statusDesc!='已完成'" @click="finishIt">
					完成
				</view>
				<view class="over2" v-if="role!='0' && statusDesc!='已结案' && statusDesc!='已完成' " @click="endIt">
					结案
				</view>
			</view>

			<view style="display: flex;padding-bottom: 20rpx;" @click="toConsultaionDetail">

				<text class="detail-title">案件内容：</text>
				<text class="detail-content">
					<text>{{itemDetail.content}}</text>
					<!-- <text v-if="itemDetail.content.length>40">{{contentCopy}}</text> -->
					<!-- <text style="color: #2DA9C5;">详情</text> -->
				</text>
				<!-- <image style="width: 12rpx;height: 24rpx;" src="../../../../../static/arrow_right.png"></image> -->
			</view>

			<view style="display: flex;align-items: center;;padding-bottom: 14rpx;">
				<text class="detail-title">所属客户：</text>
				<text class="detail-nums" style="color: #2DA9C5;">{{itemDetail.custName}}</text>
			</view>

			<view style="display: flex;align-items: center;" @click="toLawyer">
				<text class="detail-title">承办律师：</text>
				<image v-for="(item ,index) in lawyerList" :key="index"
					:class="[ index == 0 ?  'right-item-headerimg' : 'right-item-headerimg right-item-headerimgright' ]"
					:src="item.avatarPic"></image>
				<image class="right-item-arrow" src="../../../../../static/arrow_right.png"></image>
			</view>

			<view style="display: flex;align-items: center;padding-bottom: 40rpx;" @click="toJoinCustomer">
				<text class="detail-title">参与用户：</text>
				<image v-for="(item ,index) in customerList" :key="index"
					:class="[ index == 0 ?  'right-item-headerimg' : 'right-item-headerimg right-item-headerimgright' ]"
					:src="item.avatarPic"></image>
				<image class="right-item-arrow" src="../../../../../static/arrow_right.png"></image>
			</view>
		</view>
		
		<view class="view-bottom">
			
			<view @click="concern" style="display: flex;align-items: center;justify-content: center;margin-bottom: 48rpx;" v-if="bindQrUrl!=''"> 
				<image src="../../../../../static/phone/phone_dingling.png" 
				style="width: 40rpx;height: 40rpx;"></image>
				<text style="color: #999999;font-size: 28rpx;font-weight: 400;">关注公众号，接收案件通知</text>
				<image class="right-item-arrow" src="../../../../../static/arrow_right.png"></image>
			</view>
			
			<view class="view-bottom-s" v-if="role!='0'">
				<view style="margin-left: 42rpx;" @click="lookTemplate">
					<view style="display: flex;align-items: center;justify-content: center;">
						<image src="../../../../../static/phone/phone_moban.png"
						style="width: 40rpx;height: 40rpx;"></image>
					</view>
					<view style="display: flex;align-items: center;justify-content: center;">
						<text class="view-bottom-s-1">查看</text>
					</view>
					<view style="display: flex;align-items: center;justify-content: center;">
						<text class="view-bottom-s-1">模板库</text>
					</view>
				
				</view>
				<view style="margin-left: 42rpx;" @click="recordingWork">
					<view style="display: flex;align-items: center;justify-content: center;">
						<image src="../../../../../static/phone/phone_long.png"
						style="width: 40rpx;height: 40rpx;"></image>
					</view>
					<view style="display: flex;align-items: center;justify-content: center;">
						<text class="view-bottom-s-1">工作时间</text>
					</view>
					<view style="display: flex;align-items: center;justify-content: center;">
						<text class="view-bottom-s-1">记录</text>
					</view>
				
				</view>
				
				<view class="view-bottom-s-r1" @click="caseSchedule">
					案件日程
				</view>
				<view class="view-bottom-s-r2" @click="lookFile">
					查看文件
				</view>
			</view>
			
			<view class="view-bottom-s" v-if="role=='0'">
				<view class="view-bottom-s-r1" @click="caseSchedule" style="width: 320rpx;">
					案件日程
				</view>
				<view class="view-bottom-s-r2" @click="lookFile" style="width: 320rpx;">
					查看文件
				</view>
			</view>
			
		</view>
		
		<view class="zhezhao" v-if="showZhezhao">
			
			<!-- 展示选择状态修改 -->
			<view class="message-center" v-if="showStatus" style="height: 350rpx;">
				<view style="display: flex;padding: 16rpx;">
					<text>案件状态：</text>
				</view>
				<my-select :localdata="statusList" :clear="true" @change="selectStatus"></my-select>
				
				<view style="display: flex;">
					<view class="zhezhao-bottom-x zhezhao-bottom-l" @click="clickClose">
						取消
					</view>
					<view class="zhezhao-bottom-x zhezhao-bottom-r" @click="clickSubmit">
						提交
					</view>
				</view>
			</view>
			
			
			<!-- 展示二维码 -->
			<view class="message-center" v-if="showConcern">
				<view class="message-center-top">
					<text class="message-center-top-title">关注公众号，接收案件通知</text>
					<image src="../../../../../static/phone/close1.png" 
					class="message-center-top-img"
					@click="clickClose"></image>
				</view>
				
				<view style="display: flex;align-items: center;justify-content: center;">
					<view class="concern">
						<image  class="concern" mode="scaleToFill" :src="bindQrUrl"></image>
						
					</view>
					
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import mySelect from '@/pages/phone/common/my-data-select.vue'
	let app = ""
	export default {
		components:{mySelect},
		props:{
			itemDetail:{
				type:Object,
				default:null
			},
			lawyerList:{
				type:Array,
				default:[]
			},
			customerList:{
				type:Array,
				default:[]
			},
			
		},
		data() {
			return {
				role:'',
				roleUrl: '',
				status:'',
				statusDesc:'',
				needAdapt: false, //判断是不是苹果x以上机型
				showZhezhao:false,
				showConcern:false,
				contentCopy:'',
				// customerList:[],
				// lawyerList:[],
				moren:require('../../../../../static/phone/moren.png'),
				
				isEdit:true,//是否可以编辑案件状态
				showStatus:false,
				statusList:[],
				selectStatusT:'',
				
				
				bindQrUrl:'',
			}
		},
		onLoad() {
			
		},
		onShow() {
			console.log("onShow")
		},
		mounted() {
			console.log("mounted",this.lawyerList)
		},
		
		watch:{
			itemDetail:{
				deep: true,
				handler (val) {
				   this.status = this.itemDetail.status.code
				   if(this.status ==4 || this.status =='4' ){
				   	this.statusDesc = this.itemDetail.bizStatus
				   }else{
				   	this.statusDesc = this.itemDetail.status.desc
				   }
				}
			},
		},
		
		methods: {
			init(){
				app = getApp()
				let _this = this
				_this.role = app.globalData.role
				console.log('drawer--initData')
				// console.log(this.itemDetail)
			
				_this.roleUrl = _this.$roleUrl({
					tab: _this.role
				})
				
				_this.status = _this.itemDetail.status.code
				if(_this.status ==4 || _this.status =='4' ){
					_this.statusDesc = _this.itemDetail.bizStatus
				}else{
					_this.statusDesc = _this.itemDetail.status.desc
				}
				
				//获取案件状态
				_this.getParam_case_status()
						
				
				//判断当前用户是否关注公众号
				_this.focus()
				
			},
			
			async focus(){
				let _this = this
				const res = await _this.$myRequest({
					url: `/wx/mp/user/${app.globalData.appidKey}/focus`,
					headers: {
						"token": uni.getStorageSync("accessToken"),
					},
					method: 'GET', //默认是GET
				})
				console.log('focus', res)
				if(!res.data.data){
					//获取二维码
					_this.bindQr()
				}
			},
			
			/**
			 * 获取公众号二维码
			 */
			async bindQr(){
				let _this = this
				const res = await _this.$myRequest({
					url: `/wx/mp/user/${app.globalData.appidKey2}/bindQr`,
					headers: {
						"token": uni.getStorageSync("accessToken"),
					},
					method: 'GET', //默认是GET
				})
				console.log('二维码', res)
				if(res.data.code==200){
					_this.bindQrUrl = res.data.data.url
				}
			},
			
			
			//获取案件状态
			async getParam_case_status(){
				let _this = this
				const res = await _this.$myRequest({
					url: "/comm/dict/list/param_case_status	",
				})
				console.log('案件状态',res)
				if(res.data.code==200){
					let list = res.data.data
					for (var i = 0; i < list.length; i++) {
						list[i]['text'] = list[i]['name']
					}
					_this.statusList = list
					// console.log(_this.statusList)
				}
			},
			/**
			 * 案件状态选择
			 */
			selectStatus(e){
				console.log(e)
				this.selectStatusT = e
			},
			/**
			 * 案件状态提交
			 */
			async clickSubmit(){
				let _this = this
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/case/customize`,
					data: {
						caseId: _this.itemDetail.id,
						bizStatus:_this.selectStatusT
					},
					method: 'PUT', //默认是GET
				})
				console.log('修改案件状态',res)
				if(res.data.code==200){
					uni.showToast({
						title:'修改成功!',
						icon:'success',
					})
					_this.clickClose()
					_this.statusDesc = _this.selectStatusT
					_this.$emit('refreshDeatil')
				}
			},
			/**
			 * 完成
			 */
			finishIt(){
				uni.showModal({
					title:'确定完成吗?',
					content:"完成后，案件状态变更为【已完成】，不可再直接更改案件状态。",
					success:res=>{
						if(res.confirm){
							this.fixStatus('completed')
							
						}
					}
					
				})
			},
			/**
			 * 结案
			 */
			endIt(){
				let _this = this
				uni.showModal({
					title:'确定结案吗?',
					content:'完成后，案件状态变更为【已结案】，不可再直接更改案件状态。',
					success:res=>{
						if(res.confirm){
							this.fixStatus('closed')
							
						}
					}
					
				})
			},
			
			async fixStatus(val){
				let _this = this
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/case/${val}`,
					data: {
						caseId: _this.itemDetail.id,
					},
					method: 'PUT', //默认是GET
				})
				if(res.data.code==200){
					uni.showToast({
						title:'修改成功!',
						icon:'success',
					})
					_this.clickClose()
					_this.$emit('refreshDeatil')
				}
			},
			
			/**
			 * 状态编辑
			 */
			editStatus(){
				this.showZhezhao = true
				this.showStatus = true
				this.selectStatusT = ''
			},
			
		
			/**
			 * 去承办律师
			 */
			toLawyer(){
				let tag = 'lawyer'
				let caseId = this.itemDetail.id
				uni.navigateTo({
					url:'../undertakerOrJoin/undertakerOrJoin?tag='+tag+'&caseId='+caseId
				})
			},
			/**
			 * 参与用户
			 */
			toJoinCustomer(){
				let tag = 'customer'
				let caseId = this.itemDetail.id
				uni.navigateTo({
					url:'../undertakerOrJoin/undertakerOrJoin?tag='+tag+'&caseId='+caseId
				})
			},
			
			/**
			 * 点击关注公众号
			 */
			concern(){
				this.showZhezhao = true
				this.showConcern = true
			},
			/**
			 * 关闭关注公众号
			 */
			clickClose(){
				this.showZhezhao = false
				this.showConcern = false
				this.showStatus = false
				this.selectStatusT = ''
			},
			
			/**
			 * 查看模板
			 */
			lookTemplate(){
				uni.navigateTo({
					url:'checkMuban/checkMuban'
				})
			},
			/**
			 * 工作时间记录
			 */
			recordingWork(){
				uni.navigateTo({
					url:'workTime/workTime?caseId='+this.itemDetail.id
				})
				
			},
			/**
			 * 案件日程
			 */
			caseSchedule(){
				
			},
			/**
			 * 查看文件
			 */
			lookFile(){
				uni.navigateTo({
					url:'checkFiles/checkFiles?caseId='+this.itemDetail.id
				})
			},
			
			/**
			 * 前往 咨询详情
			 */
			toConsultaionDetail(){
				console.log('---')
				uni.navigateTo({
					url:'../../manage/consultationDetail/consultationDetail?id='+this.itemDetail.id
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.main {
		width: 100%;
		height: 100%;
		background: #F7F7F7;

		.detail {
			background-color: #ffffff;
			padding-left: 32rpx;
			padding-right: 32rpx;

			.detail-title {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}

			.detail-nums {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			.detail-status {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #2DA9C5;
			}

			.over {
				width: 112rpx;
				height: 60rpx;
				background: #E8F7FB;
				border-radius: 4rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-family: PingFangSC-, PingFang SC;
				font-weight: normal;
				color: #2DA9C5;
				margin-left: 32rpx;
			}

			.over2 {
				margin-left: 16rpx;
				width: 112rpx;
				height: 60rpx;
				background: #E8F7FB;
				border-radius: 4rpx;
				// border: 2rpx solid #EEEEEE;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-family: PingFangSC-, PingFang SC;
				font-weight: normal;
				color: #2DA9C5;
			}

			.detail-content {
				width: 536rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
				letter-spacing: 2rpx;
			}
		}
	}

	.right-item-headerimg {
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		border: #fff solid 4rpx;
	}

	.right-item-headerimgright {
		margin-left: -20rpx;
	}

	.right-item-arrow {
		margin-left: 8rpx;
		width: 12rpx;
		height: 24rpx;
	}
	.view-bottom {
		position: fixed;
		width: 100%;
		bottom: 0;
		
	}
	.view-bottom-s {
		height: 108rpx;
		display: flex;
		align-items: center;
		background-color: #ffffff;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
	}
	.view-bottom-s-1{
		font-size: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	.view-bottom-s-r1{
		width: 220rpx;
		height: 84rpx;
		border-radius: 44rpx 0rpx 0rpx 44rpx;
		border: 1rpx solid #2DA9C5;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #2DA9C5;
		letter-spacing: 2rpx;
		margin-left: 54rpx;
	}
	.view-bottom-s-r2{
		width: 220rpx;
		height: 88rpx;
		background: #2DA9C5;
		border-radius: 0rpx 44rpx 44rpx 0rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		letter-spacing: 2rpx;
	}
	
	.zhezhao {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		z-index: 9999;
		position: fixed;
		left: 0;
		top: 0;
		overflow: scroll;	
		// padding-top: 10vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.message-center{
		width: 622rpx;
		height: 540rpx;
		background: #ffffff;
		border-radius: 8rpx;
	}
	.message-center-top{
		height: 108rpx;
		display: flex;
		align-items: center;
	}
	.message-center-top-title{
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		margin-left: 120rpx;
	}
	.message-center-top-img{
		width: 24rpx;
		height: 24rpx;
		margin-right: 32rpx;
		margin-left: auto;
	}
	.concern{
		width: 360rpx;
		height: 360rpx;
		background: #EEEEEE;
		border-radius: 8rpx;
	}
	.zhezhao-bottom-x {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 260rpx;
		height: 88rpx;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
	
	}
	
	.zhezhao-bottom-l {
		border: 1px solid #2DA9C5;
		color: #2DA9C5;
		background-color: #FFFFFF;
		margin-left: 32rpx;
	
	}
	
	.zhezhao-bottom-r {
		background: #2DA9C5;
		color: #FFFFFF;
		margin-left: auto;
		margin-right: 32rpx;
	}
</style>
